<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Y-UI 雅浮未央官方网站</title>
    <link rel="stylesheet" href="../../public/ruoling/css/ruoling-load.css">
    <link rel="stylesheet" href="../../public/Swiper/css/animate.min.css">
    <link rel="stylesheet" href="../../public/Swiper/css/swiper.min.css">
</head>
<style>
    .Header{width: 100%;background-color: rgba(0, 0, 0, .3);position:fixed;top: 0;left: 0;height: 80px;z-index: 999;}
    .HeaderCenter{width: 1200px;margin:0 auto;height: 80px;display: flex;}
    .HeaderTitle{line-height: 80px;}
    .HeaderTitle span{font-size: 20px;font-weight: bold;letter-spacing:4px;color: white;}
    .Headernav{margin-left: 300px;}
    .HeaderUl{display: flex;line-height: 80px;}
    .HeaderUl li{padding-left: 25px;padding-right: 25px;}
    .HeaderUl li a{font-size: 16px;color: #fff;opacity: .7;padding-bottom: 5px;}
    .swiper-container {
    width: 100%;
    height: 730px;
    }  
    
    .swiper-container .swiper-button-hidden{ opacity : 0; }
    .swiper-button-next {background: url("../../public/images/ibanner_arrow.png") 100% 100% no-repeat;width: 40px;height: 70px;background-position: -38px 1px;}
    .swiper-button-prev{background: url("../../public/images/ibanner_arrow.png") 100% 100% no-repeat;width: 40px;height: 70px;background-position: -38px -67px;}
    .slide1{background: url("../../public/images/ibanner_01.png") 100% 100% no-repeat;}
    .slide2{background: url("../../public/images/ibanner_02.png") 100% 100% no-repeat;}
    .slide3{background: url("../../public/images/ibanner_03.png") 100% 100% no-repeat;}
</style>
<body>
    <header class="Header">
        <div class="HeaderCenter">
            <div class="HeaderTitle">
                <span>雅浮未央</span>
            </div>
            <div class="Headernav">
                <ul class="HeaderUl">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">在线文档</a>
                    </li>
                    <li>
                        <a href="javascript:;">在线演示</a>
                    </li>
                    <li>
                        <a href="javascript:;">源码地址</a>
                    </li>
                    <li>
                        <a href="javascript:;">视频教程</a>
                    </li>
                    <li>
                        <a href="javascript:;">腾讯云优惠</a>
                    </li>
                    <li>
                        <a href="javascript:;">阿里云优惠</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <div >
        <div class="swiper-container swiper-no-swiping">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide1">
                  
                </div>
                <div class="swiper-slide slide2">

                </div>
                <div class="swiper-slide slide3">

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev">
               
            </div>
            <div class="swiper-button-next">
                
            </div>
            
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</body>
</html>

<script src="../../public/Swiper/js/swiper.min.js"></script>
<script src="../../public/Swiper/js/swiper.animate.min.js"></script>

<script>

    const onready = {

        init:function(){
            "use strict";
            let _this = this;
          _this.render();
        },
        render:function(){
            "use strict";
            let _this = this;
            _this.bind();
        },
        bind:function(){
            "use strict";
            let _this = this;
           
            SwiperM()
         
        }
    }
    onready.init();

    function SwiperM(){
                let MySwiper = new Swiper(".swiper-container",{
                 //   direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    autoplayDisableOnInteraction: false,
                    // 如果需要分页器
                    pagination: {
                    el: '.swiper-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        hideOnClick:true
                    },
                    on:{
                        navigationHide:function(){
                            alert("隐藏")
                        }
                    }
                  
                })
            }
</script>